<template>
	<view>
		<view class="comment" v-for="(res, index) in commentList" :key="res.id">
			<!-- <view class="left"><image :src="res.url" mode="aspectFill"></image></view> -->
			<view class="right">
				<view class="top">
					<view class="name">{{ res.name }}</view>
					<!-- <view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
					</view> -->
				</view>
				<view class="content">{{ res.contentText }}</view>
				<!-- <view class="reply-box">
					<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
						<view class="username">{{ item.name }}</view>
						<view class="text">{{ item.contentStr }}</view>
					</view>
					<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
						共{{ res.allReply }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view> -->

				<u-row gutter="12">
					<u-cell-item :arrow="false">
						<!-- <u-album :urls="res.images"></u-album> -->
						
						
						<view style="">
						<u-image v-for="(img, index1) in res.images" :key="index1" :src="img"
							style="width: 100px; height: 100px; 
							display: flex;
							            margin: 0 auto;
										float: left;
							" :lazy-load="true"></u-image>
						</view>

					</u-cell-item>

				</u-row>

				<view class="bottom">
					{{ res.date }}
					<!-- <view class="reply">回复</view> -->
				</view>
			</view>
		</view>


		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '0',
				listQuery: {
					page: 1,
					limit: 20
				},

				commentList: [],
				status: 'loadmore'
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getComment();
		},
		onReachBottom() {
			this.listQuery.page = this.listQuery.page + 1
			this.getComment();
		},
		methods: {
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			// 点赞
			getLike(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			// 评论列表
			getComment() {
				this.status = 'loading';
				const baseApi = this.baseApi + '/file/getImgStream?idFile=';
				let that = this;

				const page = this.listQuery.page
				const limit = this.listQuery.limit

				this.$u.post('/goods/comment/pl/pls003?page=' + page + '&limit=' + limit, {
					goodID: this.id
				}).then(res => {

					
					if (res.count == null || res.count == 0) {
						that.status = 'nomore'
						// this.commentList = [];
						return;
					}

					that.commentCount = res.count;
					let comments = res.page.records;


					if (comments.length < limit) {
						that.status = 'nomore'
					} else {
						that.status = 'loadmore'
					}

					for (let index in comments) {
						let imgs = comments[index].imgs;
						that.commentList.push(comments[index]);
						if (!comments[index].name) {
							comments[index].name = "匿名用户";
						}


						comments[index].date = that.util.getDateDiff(comments[index].date);

						if (!imgs) {
							continue;
						}
						let images = imgs.split(",");
						let images1 = [];
						for (let i in images) {
							images1.push(baseApi + images[i]);
						}
						comments[index].images = images1;
					}


				}).catch((err) => {
					Toast(err)
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
